<template>
	<view>
		<u-navbar>
			<view class="slot-wrap">
				<image class="icon" src="../../../static/imgs/sousuohui@3.png" mode=""></image>
				<input type="text" placeholder="输入中文/拼音/首字母" placeholder-style="color:#999999;font-size:28rpx" />
			</view>
		</u-navbar>
		<view class="container">
			<view class="citynow">
				<view class="lable">
					当前/历史
				</view>
				<view class="city-ul">
					<view class="city-li">
						<u-icon name="map-fill" color="#2979ff" size="28"></u-icon>深圳
					</view>
					<view class="city-li">
						赣州
					</view>
					<view class="city-li">
						广州
					</view>
					<view class="city-li">
						广州
					</view>
					<view class="city-li">
						北京
					</view>
				</view>
			</view>

			<view class="cityhot">
				<view class="lable">
					热门城市
				</view>
				<view class="city-ul">
					<view class="city-li">
						深圳
					</view>
					<view class="city-li">
						赣州
					</view>
					<view class="city-li">
						广州
					</view>
					<view class="city-li">
						广州
					</view>
					<view class="city-li">
						北京
					</view>
				</view>
			</view>

			<view class="cityIndex">
				<u-index-list :scrollTop="scrollTop" :index-list="indexList">
					<view v-for="(item, index) in list">
						<u-index-anchor :index="item.letter" />
						<view class="list-cell u-border-bottom" v-for="(item1, index) in item.data" :key="index" @click="choseAddress(item1)">
							{{item1}}
						</view>
					</view>
				</u-index-list>
			</view>
			
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>

	</view>
</template>

<script>
	import myRequest from '../../../api/index.js'
	export default {
		data() {
			return {
				indexList: [
					"A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"
				],
				scrollTop: 0,
				list: [{
						"letter": "A",
						"data": [
							"阿坝", "阿拉善", "阿里", "安康", "安庆", "鞍山", "安顺", "安阳", "澳门"
						]
					},
					{
						"letter": "B",
						"data": ["北京", "白银", "保定", "宝鸡", "保山", "包头", "巴中", "北海", "蚌埠", "本溪", "毕节", "滨州", "百色", "亳州"]
					},
					{
						"letter": "C",
						"data": ["重庆", "成都", "长沙", "长春", "沧州", "常德", "昌都", "长治", "常州", "巢湖", "潮州", "承德", "郴州", "赤峰", "池州", "崇左", "楚雄",
							"滁州", "朝阳"
						]
					},
					{
						"letter": "D",
						"data": ["大连", "东莞", "大理", "丹东", "大庆", "大同", "大兴安岭", "德宏", "德阳", "德州", "定西", "迪庆", "东营"]
					},
					{
						"letter": "E",
						"data": ["鄂尔多斯", "恩施", "鄂州"]
					},
					{
						"letter": "F",
						"data": ["福州", "防城港", "佛山", "抚顺", "抚州", "阜新", "阜阳"]

					},
					{
						"letter": "G",
						"data": ["广州", "桂林", "贵阳", "甘南", "赣州", "甘孜", "广安", "广元", "贵港", "果洛"]

					},
					{
						"letter": "H",
						"data": ["杭州", "哈尔滨", "合肥", "海口", "呼和浩特", "海北", "海东", "海南", "海西", "邯郸", "汉中", "鹤壁", "河池", "鹤岗", "黑河", "衡水", "衡阳",
							"河源", "贺州", "红河", "淮安", "淮北", "怀化", "淮南", "黄冈", "黄南", "黄山", "黄石", "惠州", "葫芦岛", "呼伦贝尔", "湖州", "菏泽"
						]
					},
					{
						"letter": "J",
						"data": ["济南", "佳木斯", "吉安", "江门", "焦作", "嘉兴", "嘉峪关", "揭阳", "吉林", "金昌", "晋城", "景德镇", "荆门", "荆州", "金华", "济宁", "晋中",
							"锦州", "九江",
							"酒泉"
						]

					},
					{
						"letter": "K",
						"data": ["昆明", "开封"]

					},
					{
						"letter": "L",
						"data": ["兰州", "拉萨", "来宾", "莱芜", "廊坊", "乐山", "凉山", "连云港", "聊城", "辽阳", "辽源", "丽江", "临沧", "临汾", "临夏", "临沂", "林芝",
							"丽水", "六安", "六盘水",
							"柳州", "陇南", "龙岩", "娄底", "漯河", "洛阳", "泸州", "吕梁"
						]

					},
					{
						"letter": "M",
						"data": ["马鞍山", "茂名", "眉山", "梅州", "绵阳", "牡丹江"]

					},
					{
						"letter": "N",
						"data": ["南京", "南昌", "南宁", "宁波", "南充", "南平", "南通", "南阳", "那曲", "内江", "宁德", "怒江"]
					},
					{
						"letter": "P",
						"data": ["盘锦", "攀枝花", "平顶山", "平凉", "萍乡", "莆田", "濮阳"]

					},
					{
						"letter": "Q",
						"data": ["青岛", "黔东南", "黔南", "黔西南", "庆阳", "清远", "秦皇岛", "钦州", "齐齐哈尔", "泉州", "曲靖", "衢州"]

					},
					{
						"letter": "R",
						"data": ["日喀则", "日照"]
					},
					{
						"letter": "S",
						"data": ["上海", "深圳", "苏州", "沈阳", "石家庄", "三门峡", "三明", "三亚", "商洛", "商丘", "上饶", "山南", "汕头", "汕尾", "韶关", "绍兴", "邵阳",
							"十堰", "朔州", "四平", "绥化", "遂宁", "随州", "宿迁", "宿州"
						]

					},
					{
						"letter": "T",
						"data": ["天津", "太原", "泰安", "泰州", "台州", "唐山", "天水", "铁岭", "铜川", "通化", "通辽", "铜陵", "铜仁", "台湾"]
					},
					{
						"letter": "W",
						"data": ["武汉", "乌鲁木齐", "无锡", "威海", "潍坊", "文山", "温州", "乌海", "芜湖", "乌兰察布", "武威", "梧州"]
					},
					{
						"letter": "X",
						"data": ["厦门", "西安", "西宁", "襄樊", "湘潭", "湘西", "咸宁", "咸阳", "孝感", "邢台", "新乡", "信阳", "新余", "忻州", "西双版纳", "宣城", "许昌",
							"徐州", "香港", "锡林郭勒", "兴安"
						]

					},
					{
						"letter": "Y",
						"data": ["银川", "雅安", "延安", "延边", "盐城", "阳江", "阳泉", "扬州", "烟台", "宜宾", "宜昌", "宜春", "营口", "益阳", "永州", "岳阳", "榆林",
							"运城", "云浮", "玉树", "玉溪", "玉林"
						]

					},
					{
						"letter": "Z",
						"data": ["杂多县", "赞皇县", "枣强县", "枣阳市", "枣庄", "泽库县", "增城市", "曾都区", "泽普县", "泽州县", "札达县", "扎赉特旗", "扎兰屯市", "扎鲁特旗",
							"扎囊县", "张北县", "张店区", "章贡区", "张家港", "张家界", "张家口", "漳平市", "漳浦县", "章丘市", "樟树市", "张湾区", "彰武县", "漳县", "张掖", "漳州",
							"长子县", "湛河区", "湛江", "站前区", "沾益县", "诏安县", "召陵区", "昭平县", "肇庆", "昭通", "赵县", "昭阳区", "招远市", "肇源县", "肇州县", "柞水县",
							"柘城县", "浙江", "镇安县", "振安区", "镇巴县", "正安县", "正定县", "正定新区", "正蓝旗", "正宁县", "蒸湘区", "正镶白旗", "正阳县", "郑州", "镇海区", "镇江",
							"浈江区", "镇康县", "镇赉县", "镇平县", "振兴区", "镇雄县", "镇原县", "志丹县", "治多县", "芝罘区", "枝江市", "芷江侗族自治县", "织金县", "中方县", "中江县",
							"钟楼区", "中牟县", "中宁县", "中山", "中山区", "钟山区", "钟山县", "中卫", "钟祥市", "中阳县", "中原区", "周村区", "周口", "周宁县", "舟曲县", "舟山",
							"周至县", "庄河市", "诸城市", "珠海", "珠晖区", "诸暨市", "驻马店", "准格尔旗", "涿鹿县", "卓尼", "涿州市", "卓资县", "珠山区", "竹山县", "竹溪县", "株洲",
							"株洲县", "淄博", "子长县", "淄川区", "自贡", "秭归县", "紫金县", "自流井区", "资溪县", "资兴市", "资阳"
						]
					}
				],
			}
		},
		onLoad() {
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			choseAddress(val){
				console.log(val)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		width: 624rpx;
		height: 64rpx;
		background: #F4F4F4;
		border-radius: 40rpx;
		display: flex;
		align-items: center;

		.icon {
			width: 32rpx;
			height: 32rpx;
			margin-left: 28rpx;
		}

		input {
			font-size: 28rpx;
			color: #333333;
			text-indent: 22rpx;
		}
	}

	.container {

		.citynow,
		.cityhot {
			padding: 24rpx 28rpx 0;

			.lable {
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: bold;
				color: #333333;
			}

			.city-ul {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 18rpx;

				.city-li {
					width: 210rpx;
					height: 66rpx;
					background: #F8F8F8;
					border-radius: 4rpx;
					text-align: center;
					line-height: 66rpx;
					margin-bottom: 16rpx;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}

					&:nth-child(3n-1) {
						margin-left: 32rpx;
						margin-right: 32rpx;
					}
				}
			}
		}

		
	}
	
	.cityIndex {
		width: 100%;
		height: auto;
	}
	
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
</style>
